<!--
 * @Description: myCourse-- 我的课程-外层
 * @Author: your name
 * @Date: 2024-02-29
 * @LastEditTime: 2024-02-29
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="myCourse">
      <div class="left_box">
        <ul class="person_center">
          <div>
            <img
              src="https://www.rongyuejiaoyu.com/static/index/images/account.png"
              alt=""
            />
            我的课程
          </div>
          <li
            @click="courseEle(index)"
            :class="{ liactive: active == index }"
            v-for="(item, index) in myCourseList"
            :key="item.id"
          >
            <a href="javascript:void(0)">{{ item.name }}</a>
          </li>
        </ul>
      </div>

      <tabbarStudnt ref="studnt" v-if="!courseInlayer"></tabbarStudnt>

      <div class="right_con" v-if="false">
        <el-tabs v-model="activeCourse" class="my-favor">
          <el-tab-pane label="正在学" name="0"></el-tab-pane>
          <el-tab-pane label="已过期" name="1"></el-tab-pane>
        </el-tabs>

        <div v-if="activeCourse == 0">
          <ul v-for="item_t in 2" :key="item_t">
            <li>
              <div class="info_img">
                <img
                  src="https://video.rycfa.com/image/default/FF3F9CDA584C4287964910A358FB1E24-6-2.jpg"
                  alt=""
                />
              </div>
              <div class="info_detail">
                <h6>CFA TI BA II PLUS计算器使用教程</h6>
                <p class="buy_time">
                  购买时间：
                  <span>2024-02-22 14:26:24</span>有效期123：
                  <span class="datatime"> 2024-08-26 14:26 </span>
                </p>
              </div>
              <div>
                <el-button
                  type="danger"
                  round
                  @click="courseInlayer = true"
                  style="
                    background: linear-gradient(-90deg, #fa4e4e, #fd894f);
                    color: #fff;
                    border: none;
                  "
                >
                  继续学习
                </el-button>
                <el-button type="info" round> 延长学籍 </el-button>
              </div>
            </li>
          </ul>
        </div>

        <!-- 直播课程 -->
        <!-- <div class="liveCourses" v-if="activeCourse == 0">
          <ul>
            <li>
              <div class="info_img">
                <img
                  src="https://img.rongyuejiaoyu.com/uploads/20240116/83919b98c1835fd5f2a4e351e02fce43.jpg"
                  alt=""
                />
              </div>
              <div class="info_detail">
                <h6>CFA TI BA II PLUS计算器使用教程</h6>
                <p class="buy_time">
                  直播开始时间：
                  <span>2024-02-22 14:26:24</span>
                </p>
                <p>
                  <span>免费</span>
                  |
                  <span>Meng老师</span>
                </p>
              </div>

              <el-button type="danger" @click="liveBroadcast(i)">
                观看直播
              </el-button>
            </li>
          </ul>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getMyComboMenu } from '@/api/homes_tabs'
import tabbarStudnt from './tabbarStudnt.vue'
export default {
  name: 'myCourse',
  components: {
    tabbarStudnt
  },
  data() {
    return {
      active: 0,
      activeCourse: '0',
      myCourseList: [
        'CFA课程',
        '直播课程',
        '预约课程',
        '我的收藏',
        '试听课程',
        '已购课程'
      ],
      courseInlayer: false
    }
  },
  created() {
    this.getCourseList()
  },
  methods: {
    courseEle(i) {
      this.active = i
    },
    async getCourseList() {
      let { data: data } = await getMyComboMenu()
      this.myCourseList = data.data
    },
    toStudy(index) {
      if (index == 0) {
        this.$router.push({
          path: '/lineCourseList',
          query: {}
        })
      } else {
        this.$router.push({
          path: '/newzhike',
          query: {}
        })
      }
    },
    liveBroadcast() {
      this.$router.push({
        path: '/newzhike/playback',
        query: {}
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/Order_couse.scss';

.my-favor {
  ::v-deep .el-tabs__nav-wrap::after {
    display: block;
    height: 2px;
    background-color: #ececec !important;
  }
}
</style>
